<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>所有班级情况</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <link href="/css/myLayUI.css">
    <style>
        .box{
            /*width: 200px;*/
            /*height: 200px;*/
        }
        .bg-1{
            background-color: #F04949;
        }
        .bg-2{
            background-color: #104949;
        }
        .bg-3{
            background-color: #a04949;
        }
        .bg-4{
            background-color: #00F7DE;
        }

        body {
            color: #595959;
            background-color: #f0f2f5;
        }

        /**
         * ::-webkit-scrollbar              滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
         * ::-webkit-scrollbar-button       滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
         * ::-webkit-scrollbar-track        外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
         * ::-webkit-scrollbar-track-piece  内层轨道，滚动条中间部分（除去）。
         * ::-webkit-scrollbar-thumb        滚动条里面可以拖动的那部分
         * ::-webkit-scrollbar-corner       边角
         * ::-webkit-resizer                定义右下角拖动块的样式
         *
         */

        /*自定义滚动条样式 */
        ::-webkit-scrollbar {
            width: 10px;
            height: 5px;
        }
        ::-webkit-scrollbar-button,
        ::-webkit-scrollbar-button:vertical {
            display: none;
        }
        ::-webkit-scrollbar-track,
        ::-webkit-scrollbar-track:vertical {
            background-color: black;
        }
        ::-webkit-scrollbar-track-piece {
            background-color: #f5f5f5;
        }
        ::-webkit-scrollbar-thumb,
        ::-webkit-scrollbar-thumb:vertical {
            margin-right: 10px;
            background-color: #a6a6a6;
        }
        ::-webkit-scrollbar-thumb:hover,
        ::-webkit-scrollbar-thumb:vertical:hover {
            background-color: #aaa;
        }
        ::-webkit-scrollbar-corner,
        ::-webkit-scrollbar-corner:vertical {
            background-color: #535353;
        }
        ::-webkit-scrollbar-resizer,
        ::-webkit-scrollbar-resizer:vertical {
            background-color: #ff6e00;
        }
        /*自定义滚动条样式 end*/

        .layui-unselect ,.layui-tab-bar{
            display: none;
        }

    </style>
</head>
<body>
<!--    <h1>所有班级情况</h1>-->
    <div class="layui-header" style=" top: 1vh;">
        <div class="layui-fluid ew-console-wrapper">
            <!--班级-->
            <button class="layui-btn" id="proName" style="margin-top: 2vh; margin-left: 10vw">
                <span>请选择专业</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
    </div>
    <div class="layui-body" style="left: 0; top: 2vh;" hidden>
        <!--班级的数据显示-->
        <div class="layui-fluid ew-console-wrapper">
            <!-- 一行 -->
            <div class="layui-row layui-col-space15">

                <!--
                    同一年级的不同班级的比例情况。
                -->
                <div class="layui-card-header">
                    <div class="layui-tab layui-tab-brief" lay-filter="year" style="overflow-x: auto; height: 10vh">
                        <ul class="layui-tab-title" id="classYears" style="text-align: center">
                            <li class="layui-this" style="width: 20vw">2019级</li>
                            <li style="width: 20vw">2020级</li>
                            <li style="width: 20vw">2021级</li>
                        </ul>
                        <!--                    <div class="layui-tab-content" style="height: 100px;">-->
                        <!--<div class="layui-tab-content">
                            <div class="layui-tab-item layui-show"></div>
                            <div class="layui-tab-item"></div>
                            <div class="layui-tab-item"></div>
                        </div>-->
                    </div>
                </div>

                <!-- 年级科目 | 最高分对比情况 模块-->
                <div class="layui-col-lg8 layui-col-md8">
                    <!--男 - 女 各科 | 最高分对比情况-->
                    <div class="layui-card">
                        <div class="layui-card-header"><year>2019</year>级 科目 最高分</div>
                        <div class="layui-card-body">
                            <div id="ECharts00" style="min-height: 220px; height: 60vh; width: 100%;"></div>
                        </div>
                    </div>
                </div>
                <!--该专业上总的男女比例情况-->
                <div class="layui-col-lg4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header"><year>2019</year>级 总男女比例 - 饼图</div>
                        <div class="layui-card-body">
                            <div id="ECharts01" style="min-height: 220px; height: 60vh"></div>
                            <!--<div class="layui-row">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div id="ECharts00" style="min-height: 220px;"></div>
                                    </div>
                                </div>
                            </div>-->
                        </div>
                    </div>
                </div>

                <!-- 男 - 女 各科 | 最低分对比情况 模块-->
                <div class="layui-col-lg8 layui-col-md8">
                    <!--男 - 女 各科 | 最低分对比情况-->
                    <div class="layui-card">
                        <div class="layui-card-header"><year>2019</year>级 科目 最低分</div>
                        <div class="layui-card-body">
                            <div id="ECharts02" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>
                <!--该班级上的男女比例情况-->
                <div class="layui-col-lg4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header"><year>2019</year>级 男 - 女 比例 饼图</div>
                        <div class="layui-card-body">
                            <div id="ECharts03" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>

                <!--所有班级的科目情况-->
                <div class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header"  style="height: 12vh">
                            <div class="layui-tab layui-tab-brief" lay-filter="subjects">
                                <ul class="layui-tab-title" id="subjects" style="overflow-x: auto; height: 12vh" >
                                    <!--动态列表-->
<!--
                                    <li class="layui-this"><subject></subject></li>
                                    <li class="layui-this"><subject>高等数学</subject></li>
                                    <li><subject>思想政治</subject></li>
                                    <li><subject>java编程思想</subject></li>
                                    <li><subject>java核心技术卷1</subject></li>
                                    <li><subject>java核心技术卷2</subject></li>
                                    <li><subject>java设计模式</subject></li>
                                    <li><subject>java并发编程实战</subject></li>
                                    <li><subject>深入了解JVM</subject></li>
                                    <li><subject>思想政治</subject></li>
                                    <li><subject>小灰漫画算法</subject></li>
                                    <li><subject>spring实战</subject></li>
-->
                                </ul>
                                <!--                    <div class="layui-tab-content" style="height: 100px;">-->
                                <!--<div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show"></div>
                                    <div class="layui-tab-item"></div>
                                    <div class="layui-tab-item"></div>
                                </div>-->
                            </div>
                        </div>
                        <div class="layui-card-body">
<!--                            <div id="ECharts04" style="min-height: 220px; height: 90vh"></div>-->

                            <div class="layui-card-header"><year>2019</year>级 学号 - <subjectText>高等数学</subjectText> 分数 关系图</div>
                            <div id="ECharts04" style=" margin-top: 5vh; min-height: 220px; height: 90vh"></div>
                        </div>
                    </div>
                </div>
                <!--所有班级的 学生 GPA 情况-->
                <!--2019-->
                <div class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-card-header"><year>2019</year>级 学生 - GPA 关系图</div>
                            <div id="ECharts05" style="min-height: 220px; height: 90vh"></div>
                        </div>
                    </div>
                </div>
           <!--     &lt;!&ndash;2020&ndash;&gt;
                <div class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div id="ECharts06" style="min-height: 220px; height: 90vh"></div>
                        </div>
                    </div>
                </div>
                &lt;!&ndash;2021&ndash;&gt;
                <div class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div id="ECharts07" style="min-height: 220px; height: 90vh"></div>
                        </div>
                    </div>
                </div>-->
            </div>
        </div>
    </div>

    <script src="/js/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <!--    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <!--服务器路径配置-->
    <script src="/js/myWebConfig.js"></script>
    <!--恢复异步执行-->
    <script>
        $.ajaxSettings.async = true;   //恢复异步执行
    </script>
    <!--初始化 可视化 数据-->
    <script>
        let option00 ={};
        let option01 ={};
        let option02 ={};
        let option03 ={};
        let option04 ={};
        let option05 ={};

        // 数据部分
        // 科目、A班最高分、B班最高分、C班最高分。
        // 班级列表，最高分列表，条形图个数。
        let option00Data ={classList: ['product'], dataList:[],  seriesList:[]};
        //
        let option01Data =[];
        // 班级列表、最低分列表、条形图个数。
        let option02Data ={classList: ['product'], dataList: [], seriesList:[]};
        // 班级标题、班级列表、各个班级男女比例情况列表、各个班级男女比例图列表。
        let option03Data ={titleList:[], classList: ['product'], dataList:[], seriesList:[]};
        // 班级列表、学号列表、同一个科目，不同班级的分数情况。
        let option04Data ={classList:[], stuIdList:[], dataList:[]};
        // 班级列表、学号、数据。
        let option05Data ={classList:[], stuIdList:[], GPAList:[]};



        // 表图的个数
        var optionList =[option00,option01,option02,option03,option04,option05];

        // 当前年级
        let thisYear = 0
        // 初始年份
        let initYear  = 2019
        // 当前科目
        let thisSubject = ""
        // 科目和学号
        let courseInfoList = []
        // 表格核心数据。
        let resObj = {}

        // initPage(2019);

        /**
         * 初始化页面，并且设置年级选项卡。
         * @param year
         */
        function initPage(year) {

            let yearLabel = $("year")

            console.log("页面初始化")
            console.log(yearLabel)
            console.log("年级选项卡：")
            // 当前点击的年级
            thisYear = yearLabel

            console.log("长度" + yearLabel.length)

            for (let i = 0; i < yearLabel.length; i++) {
                // console.log($("year")[i].innerText)
                yearLabel[i].innerText = year
            }


            /**
             * 科目最高分。
             *
             * 数据部分：    option00.dataset.source[i]['科目名称','A班最高分','B班最高分','C班最高分']
             * 班级信息：    option00.dataset.dimensions['product', 'A班', 'B班', 'C班','D班'...]
             *
             */
            /*男女比例*/
            /*科目最高分*/
            option00 = {
                // title: {
                //     // text:  year+'级 科目 最高分',
                //     subtext: '',
                //     left: 'left'
                // },
                legend: {
                    // 班级。
                    // data: option00Data.classList,
                },
                tooltip: {},
                dataset: {
                    // dimensions: option00Data.classList,
                    // dimensions: ['product', 'A班', 'B班', 'C班'],
                    // 数据部分
                    source: option00Data.dataList,
                    /*source: [
                        ['高等数学', 43.3, 85.8, 93.7],
                        ['思想政治', 83.1, 73.4, 55.1],
                        ['java程序设计', 86.4, 65.2, 82.5],
                        ['java编程思想', 72.4, 53.9, 39.1],
                        ['Linux系统运维', 43.3, 85.8, 93.7],
                        ['教你如何拐跑别人家媳妇', 83.1, 73.4, 55.1],
                        ['java核心技术卷1', 86.4, 65.2, 82.5],
                        ['java核心技术卷2', 72.4, 53.9, 39.1],
                        ['小灰漫画算法', 43.3, 85.8, 93.7]
                    ]*/
                },
                xAxis: { type: 'category' },
                yAxis: {name: '分数', type: 'value'},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                // series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                series: option00Data.seriesList
            };
            // let ECharts00 = echarts.init(document.getElementById('ECharts00'));
            // ECharts00.setOption(option00);
            drawDiagrams(option00,'ECharts00',false);

            /**
             * 总男女比例   --- 饼图
             * 数据部分：    option01.series[0].data[i] [value:人数， name:性别]
             */
            /*总男女比例*/
            option01 = {
                // title: {
                //     // text: year + '级 总男女比例 - 饼图',
                //     subtext: '',
                //     left: 'left'
                // },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    left: 'right'
                },
                series: [
                    {
                        name: '男女比例',
                        type: 'pie',
                        radius: '50%',
                        color: ['#5470c6', '#91cc75'],
                        /*数据部分*/
                        data: option01Data,
                        /*data: [
                            {value: 1048, name: '男'},
                            {value: 735, name: '女'}
                        ],*/
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // let ECharts01 = echarts.init(document.getElementById('ECharts01'));
            // ECharts01.setOption(option01);
            drawDiagrams(option01,'ECharts01',false);

            /**
             * 科目最低分
             * 数据部分：    option02.dataset.source[i]['科目名称','A班','B班','C班']
             */
            /*科目最低分*/
            option02 = {
                // title: {
                //     // text: year+'级 科目 最低分',
                //     subtext: '',
                //     left: 'left'
                // },
                legend: {},
                tooltip: {},
                dataset: {
                    // dimensions: option02Data.classList,
                    // dimensions: ['product', 'A班', 'B班', 'C班'],
                    source: option02Data.dataList,
                    /*source: [
                        ['高等数学', 43.3, 85.8, 93.7],
                        ['思想政治', 83.1, 73.4, 55.1],
                        ['java程序设计', 86.4, 65.2, 82.5],
                        ['java编程思想', 72.4, 53.9, 39.1],
                        ['Linux系统运维', 43.3, 85.8, 93.7],
                        ['教你如何拐跑别人家媳妇', 83.1, 73.4, 55.1],
                        ['java核心技术卷1', 86.4, 65.2, 82.5],
                        ['java核心技术卷2', 72.4, 53.9, 39.1],
                        ['小灰漫画算法', 43.3, 85.8, 93.7],
                    ]*/
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                // series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                series: option02Data.seriesList
            };
            // let ECharts02 = echarts.init(document.getElementById('ECharts02'));
            // ECharts02.setOption(option02);
            drawDiagrams(option02,'ECharts02',false);

            /**
             * 各班男女比例   --- 饼图
             * 标题：      option03.title[i] {}
             * 数据部分：   option03.dataset.source[i] ['性别','A班人数','B班人数','C班人数','D班人数']
             */
            /*各个班级男女比例*/
            option03 = {
                // 标题
                title: option03Data.titleList,
                /*title: [
                    // {
                    //     // text: year+'级 男 - 女 比例 饼图',
                    //     left: 'left'
                    // },
                    {
                        subtext: 'A班',
                        left: '25%',
                        top: '10%',
                        textAlign: 'center'
                    },
                    {
                        subtext: 'B班',
                        left: '75%',
                        top: '10%',
                        textAlign: 'center'
                    },
                    {
                        subtext: 'C班',
                        left: '25%',
                        top: '55%',
                        textAlign: 'center'
                    },
                    {
                        subtext: 'D班',
                        left: '75%',
                        top: '55%',
                        textAlign: 'center'
                    }
                ],*/
                legend: {
                    orient: 'horizontal',
                    left: 'right'
                },
                tooltip: {},
                dataset: {
                    // 班级个数
                    dimensions: option03Data.classList,
                    // dimensions: ['product', 'A班', 'B班', 'C班', 'D班'],
                    // 数据部分
                    source: option03Data.dataList,
                    /*source: [
                        ['男', 86.5, 92.1, 85.7, 83.1],
                        ['女', 41.1, 30.4, 65.1, 53.3],
                    ]*/
                },
                // 饼图个数
                series: option03Data.seriesList,
                /*series: [
                    {
                        type: 'pie',
                        radius: '20%',
                        center: ['25%', '30%'],
                        encode: {
                            itemName: 'product',
                            value: 'A班'
                        }
                        // No encode specified, by default, it is 'A班'.
                    },
                    {
                        type: 'pie',
                        radius: '20%',
                        center: ['75%', '30%'],
                        encode: {
                            itemName: 'product',
                            value: 'B班'
                        }
                    },
                    {
                        type: 'pie',
                        radius: '20%',
                        center: ['25%', '75%'],
                        encode: {
                            itemName: 'product',
                            value: 'C班'
                        }
                    },
                    {
                        // name:'D班',
                        type: 'pie',
                        radius: '20%',
                        center: ['75%', '75%'],
                        encode: {
                            itemName: 'product',
                            value: 'D班'
                        }
                    }
                ]*/
            };
            // let ECharts03 = echarts.init(document.getElementById('ECharts03'));
            // ECharts03.setOption(option03);
            drawDiagrams(option03,'ECharts03',false);

            /**
             * 总成绩情况
             * 班级名称：    option04.legend.data []
             * 学号：       option04.xAxis.data []
             * 数据部分：    option04.series[i].data  []
             */
            /*一个专业内的学生成绩总情况查询*/
            option04 = {
                // title: {
                //     // text: year+'级 学号 - 科目 分数 关系图'
                // },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // 班级
                    data: option04Data.classList,
                    // data: [ 'A班', 'B班', 'C班', 'D班']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['stack', 'tiled'] },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    name: '学号',
                    type: 'category',
                    boundaryGap: false,
                    // 学号
                    data: option04Data.stuIdList,
                    /*data:
                        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
                            '20', '21', '22', '23', '24', '25', '26', '27', '28', '29',
                            '30', '31', '32', '33', '34', '35', '36', '37', '38', '39',
                            '40', '41', '42', '43', '44', '45', '46', '47', '48', '49',
                            '50', '51', '52', '53', '54', '55', '56', '57', '58', '59',
                            '60', '61', '62', '63', '64', '65', '66', '67', '68', '69',
                        ]*/
                },
                yAxis: {
                    name: '分数',
                    type: 'value'
                },
                // 同一个科目，不同班级的分数情况。
                series: option04Data.dataList,
                /*series: [
                    /!*高等数学*!/
                    {
                        name: 'A班',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                        ]
                    },
                    {
                        name: 'B班',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310, 220, 182, 191,
                            220, 182, 191, 234, 290, 330, 310, 220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310, 220, 182, 191,
                            220, 182, 191, 234, 290, 330, 310, 220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310, 220, 182, 191,
                        ]
                    },
                    {
                        name: 'C班',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                        ]
                    },
                    {
                        name: 'D班',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                        ]
                    }
                ]*/
            };
            // let ECharts04 = echarts.init(document.getElementById('ECharts04'));
            // ECharts04.setOption(option04);
            drawDiagrams(option04,'ECharts04',false);

            /**
             * 学生GPA
             * 班级：      option05.legend.data []
             * 学号：      option05.xAxis.data []
             * 数据部分：   option05.series[i].data []
             */
            /*所有班级的 学生 GPA 情况*/
            /*2019*/
            option05 = {
                // title: {
                //     // text: year+'级 学生 - GPA 关系图'
                // },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // 班级
                    data: option05Data.classList,
                    // data: ['A班', 'B班', 'C班', 'D班', 'E班']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    // show: true,
                    feature: {
                        // saveAsImage: {}
                        magicType: { show: true, type: ['stack', 'tiled'] },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    name:'学号',
                    type: 'category',
                    boundaryGap: false,
                    // 学号
                    data: option05Data.stuIdList,
                    /*data:
                        ['1', '2', '3', '4', '5', '6', '7','8','9','10',
                            '20','21', '22', '23', '24', '25', '26', '27','28','29',
                            '30','31', '32', '33', '34', '35', '36', '37','38','39',
                            '40','41', '42', '43', '44', '45', '46', '47','48','49',
                            '50','51', '52', '53', '54', '55', '56', '57','58','59',
                            '60','61', '62', '63', '64', '65', '66', '67','68','69',
                        ]*/
                },
                yAxis: {
                    name:'分数',
                    type: 'value'
                },
                // 各个班学生 GPA.
                series: option05Data.GPAList,
                /*series: [
                    {
                        name: 'A班',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                        ]
                    },
                    {
                        name: 'B班',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310,220, 182, 191,
                            220, 182, 191, 234, 290, 330, 310,220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310,220, 182, 191,
                            220, 182, 191, 234, 290, 330, 310,220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310,220, 182, 191,
                        ]
                    },
                    {
                        name: 'C班',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                        ]
                    },
                    {
                        name: 'D班',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301,
                            334, 390, 330, 320, 390, 330, 320, 320, 332, 301,
                            320, 332, 301, 334, 390, 330, 320, 320, 332, 301,
                            334, 390, 330, 320, 390, 330, 320, 320, 332, 301,
                            320, 332, 301, 334, 390, 330, 320, 320, 332, 301,
                            334, 390, 330, 320, 390, 330, 320, 320, 332, 301,
                        ]
                    },
                    {
                        name: 'E班',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901,
                            820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901,
                            820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901,
                            820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901, ]
                    }
                ]*/
            };
            // let ECharts05 = echarts.init(document.getElementById('ECharts05'));
            // ECharts05.setOption(option05);
            drawDiagrams(option05,'ECharts05',false);
        }
        /**
         * 初始化 option 。
         */
        function initOption() {
            // 数据部分
            // 科目、A班最高分、B班最高分、C班最高分。
            // 班级列表，最高分列表，条形图个数。
            option00Data ={classList: ['product'], dataList:[],  seriesList:[]};
            //
            option01Data =[];
            // 班级列表、最低分列表、条形图个数。
            option02Data ={classList: ['product'], dataList: [], seriesList:[]};
            // 班级标题、班级列表、各个班级男女比例情况列表、各个班级男女比例图列表。
            option03Data ={titleList:[], classList: ['product'], dataList:[], seriesList:[]};
            // 班级列表、学号列表、同一个科目，不同班级的分数情况。
            option04Data ={classList:[], stuIdList:[], dataList:[]};
            // 班级列表、学号、数据。
            option05Data ={classList:[], stuIdList:[], GPAList:[]};

        }

        /**
         * 绘制 表图，或者重建表图。
         *
         *      如果 isResize 为 false ==> 绘制表图。
         *      如果 isResize 为 true  ==> 重建表图。
         *
         * @param option：   要绘制的图表参数。
         * @param str：      要绘制的图表id。
         * @param isResize： 绘制（false）还是重建（true）表图。
         * 注意：
         *      若 option 内容改变，则 isResize 需要设置为 false 才能动态显示数据。
         */
        function drawDiagrams(option,str,isResize) {
            // let ECharts04 = echarts.init(document.getElementById('ECharts04'));
            let ECharts = echarts.init(document.getElementById(str));

            // 如果不是重构，则显示。如果是重建，则重建。
            if (isResize == false){
                // 加上 true 解决二次缓存，使用上一次的数据的情况。
                ECharts.setOption(option,true);
            }else if (isResize == true){
                ECharts.resize();
            }
        }
        function drawDiagramsList() {
            drawDiagrams(option00,'ECharts00',true);
            drawDiagrams(option01,'ECharts01',true);
            drawDiagrams(option02,'ECharts02',true);
            drawDiagrams(option03,'ECharts03',true);
            drawDiagrams(option04,'ECharts04',true);
            drawDiagrams(option05,'ECharts05',true);

            // drawDiagrams(option00,'ECharts00',false);
            // drawDiagrams(option01,'ECharts01',false);
            // drawDiagrams(option02,'ECharts02',false);
            // drawDiagrams(option03,'ECharts03',false);
            // drawDiagrams(option04,'ECharts04',false);
            // drawDiagrams(option05,'ECharts05',false);

        }

        /**
         * 初始化年级选项卡
         * @param subject
         */
        function initSubjectTab(subject) {

            let subjectTextLabel = $("subjectText")
            // console.log("选项卡内容")
            // console.log(subjectTextLabel)
            // console.log("点击的选项卡：" + subject)
            // console.log("上一次的选项卡内容：" + subjectTextLabel[0].innerText)
            subjectTextLabel[0].innerText = subject
            subjectChartData_option04Data(courseInfoList, subject, option04Data.dataList)
            // console.log("表格数据：")
            // console.log(option04Data)
            // console.log(option04)
            // 重新初始化 option04。
            drawDiagrams(option04,'ECharts04',false);

            // console.log("方法执行完毕")
        }

        /**
         * 将 GPA 百分制转为 学分制 【采用 中科大4.3算法】
         *
         */
        function toGPA(score) {
            // 采用 中科大4.3算法，计算 GPA。

            // 成绩      学分

            // 100～95  4.3
            // 94～90   4.0
            // 89～85   3.7

            // 84～82   3.3
            // 81～78   3.0
            // 77～75   2.7

            // 74～72   2.3
            // 71～68   2.0
            // 67～65   1.7

            // 64～64   1.5
            // 63～61   1.3
            // 60～60   1.0

            // 59～0    0
            // console.log("分数：" + score)
            if (100>=score && score>=95){
                return 4.3
            }else if(score>=90){
                return 4.0
            }else if(score>=85){
                return 3.7
            }else if(score>=82){
                return 3.3
            }else if(score>=78){
                return 3.0
            }else if(score>=75){
                return 2.7
            }else if(score>=72){
                return 2.3
            }else if(score>=68){
                return 2.0
            }else if(score>=65){
                return 1.7
            }else if(score>=64){
                return 1.5
            }else if(score>=64){
                return 1.3
            }else if(score>=60){
                return 1.0
            }else if(score>=0){
                return 0
            }
        }

        /**
         * 根据同一个科目，进行不同的班级分数情况显示。
         * @param data：     数据源。
         * @param subjects： 要进行排序的科目。
         * @param outData：  要输出的数据。
         */
        function subjectChartData_option04Data(data,subjects,outData)   {
            console.log("数据源：")
            console.log(data)
            console.log("科目：")
            console.log(subjects)

            // 当前班级
            let thisClassName = ""
            // 班级下标
            let classIndex = 0

            // 当前科目。
            for (let i = 0; i < data.length; i++) {
                // 科目相同
                if (data[i].courseName === subjects){
                    // 进行学号遍历
                    for (let j = 0, k = 0; j < data[i].stuInfo.length; j++, k++) {
                        // 默认是第一个元素的班级信息。
                        if (j === 0){
                            thisClassName = data[i].stuInfo[j].className;
                            outData[classIndex] = {
                                // name: 'A班',
                                name: thisClassName, // 班级
                                type: 'line',
                                stack: 'Total',
                                smooth: true,
                                data: []
                            };
                        }
                        // 班级不同
                        if (thisClassName !== data[i].stuInfo[j].className){
                            thisClassName = data[i].stuInfo[j].className;
                            classIndex++
                            k = 0
                            outData[classIndex] = {
                                // name: 'A班',
                                name: thisClassName, // 班级
                                type: 'line',
                                stack: 'Total',
                                smooth: true,
                                data: []
                            };
                        }
                        // 分数赋值
                        outData[classIndex].data[k] = data[i].stuInfo[j].subjectsScore

                        // console.log("当前学号：" + data[i].stuInfo[j].studentId)
                        // console.log("当前分数：" + data[i].stuInfo[j].subjectsScore)
                    }
                }
            }
        }

        /**
         * 动态遍历。科目选项卡个数。
         */
        function subjectTabNum(){

            // 处理科目选项卡。
            let subjectElem = $("#subjects")
            console.log("courseInfoList：")
            console.log(courseInfoList)

            // console.log("科目选项卡的子元素个数：")
            // console.log(subjectElem)
            // 删除该元素下的所有子元素。
            subjectElem.empty()

            // 动态 遍历科目。
            for (let m = 0; m < courseInfoList.length; m++) {
                if (m === 0){
                    subjectElem.append("<li class='layui-this'><subject>"+courseInfoList[m].courseName+"</subject></li>")
                }else {
                    subjectElem.append("<li><subject>"+courseInfoList[m].courseName+"</subject></li>")
                }
            }

        }
        // 页面发生变化时触发。
        window.onresize = function () {
            console.log("页面改变了")
            console.log("当前年份：" + thisYear)

            drawDiagramsList()
        }
        // $("#subjects").on("click",function () {
        //     drawDiagrams(option04,'ECharts04',true);
        // })

        /**
         * 初始化页面的数据部分。
         * @param resObj：总数据源。
         * @param year： 年份。
         */
        function initPageData(resObj,year) {
            console.log("初始化页面")
            console.log(resObj)
            console.log("当前年份")
            console.log(year)

            initOption()

            // 学生信息。
            let stuInfo = resObj.data.data
            // 科目和学分
            let courseInfo = resObj.data.courseList
            console.log("学生信息：")
            console.log(stuInfo)
            console.log("科目和学分：")
            console.log(courseInfo)

            let i = 0, j = 0,k = 0,l = 0;

            // 科目。{学号、分数}.
            courseInfoList = []
            // 最高分
            let maxScore = 0
            // 最低分
            let minScore = 100
            // 男 【全专业】
            let allMale = 0
            // 女 【全专业】
            let allFemale = 0
            // 临时男女比例
            // 男 【临时】
            let tempMale = 0
            // 女 【临时】
            let tempFemale = 0

            // 班级和男女人数。
            let classMaleAndFemale = []

            // 科目和边界分数
            let courseMaxAndMin = []
            // 当前班级名称
            let thisClassName = ''

            // 获取当前专业的班级信息
            let classInfo = []

            // 设置科目。
            for (i = 0; i < courseInfo.length; i++) {
                // console.log("当前科目：" +courseInfo[i].courseName)

                courseInfoList[i] = {
                    courseName: courseInfo[i].courseName,
                    credits:    courseInfo[i].credits,
                    stuInfo: []
                }
                // 获取学生分数。【2019、2020、2021】
                for (j = 0, k = 0,l = 0; j < stuInfo.length; j++) {

                    // 判断年级。根据班级前2个数字进行班级确实
                    // 一个是 String ，一个是 integer。

                    // 年级判断的核心代码。
                    if(stuInfo[j].className.substring(0,2) == year%100){
                        // console.log("当前年级是：" + stuInfo[j].className.substring(0,2)) // 3479
                        // 判断当前科目。
                        if (stuInfo[j].courseName === courseInfo[i].courseName){
                            // 第一次。
                            if (k === 0){
                                classInfo[0] = stuInfo[j].className
                                // console.log("当前班级：")
                                // console.log(classInfo[k])
                                // 对 图一和图三、图四进行数据赋值
                                // option00Data.classList[k+1] = classInfo[k]
                                // option02Data.classList[k+1] = classInfo[k]

                                // console.log("初始化 === classInfo")
                                // console.log(classInfo)
                            }
                            // console.log("当前学号：" + stuInfo[j].studentId + "    当前分数：" + stuInfo[j].subjectsScore)
                            // 赋值当前科目与学生分数情况。
                            courseInfoList[i].stuInfo[k] = {
                                // 学号
                                studentId:      stuInfo[j].studentId,
                                // 班级
                                className:      stuInfo[j].className,
                                // 科目分数
                                subjectsScore:  stuInfo[j].subjectsScore
                            }

                            // 新的班级
                            if (stuInfo[j].className !== classInfo[l]){
                                classInfo[++l] = stuInfo[j].className
                                // 对 图一和图三、图四进行数据赋值
                                // option00Data.classList[l+1] = classInfo[l]
                                // option02Data.classList[l+1] = classInfo[l]
                            }
                            k++
                        }
                    }
                    // console.log("当前年级是：" + stuInfo[j].className.substring(0,2)) // 5537

                }

                // 赋值变量。
                courseMaxAndMin[i] = {
                    // 科目名称
                    courseName: courseInfo[i].courseName,
                    classData: [],
                }
            }
            console.log("班级情况：")
            console.log(classInfo)
            console.log("长度：")
            console.log(classInfo.length)

            // 没有班级内容。
            if (classInfo.length === 0){
                // 该年级没有数据。
                layer.msg("该年级没有数据！", {icon: 0});
                return -1;
            }


            // 获取科目。
            for (i = 0; i < courseInfo.length; i++) {
                // console.log("当前科目：" + courseInfo[i].courseName)

                // classData = []
                // 班级查看
                for (j = 0; j <classInfo.length; j++) {
                    // console.log("当前班级："+classInfo[j])

                    // 获取分数。
                    for (k = 0; k < stuInfo.length; k++) {
                        // 判断当前年级。
                        if (classInfo[j] === stuInfo[k].className) {
                            // 如果当前科目与当前学生的科目相同。
                            if (courseInfo[i].courseName === stuInfo[k].courseName){
                                // console.log(k+1 + "分数："+stuInfo[k].subjectsScore )
                                // 寻找最高分和最低分。
                                // 最高分
                                if (stuInfo[k].subjectsScore > maxScore){
                                    maxScore = stuInfo[k].subjectsScore
                                }
                                // 最低分
                                else if (stuInfo[k].subjectsScore < minScore){
                                    minScore = stuInfo[k].subjectsScore
                                }

                                // 查看男女情况
                                if (i === 0){
                                    // 初始化
                                    classMaleAndFemale[j] = {
                                        className: stuInfo[k].className,
                                        male: 0,
                                        female: 0
                                    }
                                    // 默认第一个班级
                                    if (k === 0 || thisClassName == ""){
                                        // console.log("当前班级名称：【修改前】" + thisClassName)
                                        thisClassName = stuInfo[k].className
                                        // console.log("当前班级名称【修改后】：" + thisClassName)
                                    }
                                    // console.log("当前班级名称：" + thisClassName)
                                    // console.log("学号："+stuInfo[k].studentId+"    性别：" + stuInfo[k].gender + "    班级："+stuInfo[k].className)
                                    // 不同班级
                                    if (thisClassName !== stuInfo[k].className){
                                        // console.log("不同班级。")

                                        // console.log("下标："+j) // 为 1，而不是期望的 0.
                                        // console.log("当前班级名称："+stuInfo[k].className)
                                        // console.log("男："+tempMale)
                                        // console.log("女："+tempFemale)

                                        // 男
                                        classMaleAndFemale[j-1].male = tempMale
                                        // 女
                                        classMaleAndFemale[j-1].female = tempFemale

                                        thisClassName = stuInfo[k].className

                                        tempMale = 0
                                        tempFemale = 0
                                    }
                                    //相同班级
                                    (stuInfo[k].gender === 1 ) ?
                                        tempMale++ : tempFemale++

                                    // 总男女比例。
                                    (stuInfo[k].gender === 1) ? allMale++ : allFemale++
                                }
                            }
                        }
                    }

                    if (j == classInfo.length-1){
                        // 男
                        classMaleAndFemale[j].male = tempMale
                        // 女
                        classMaleAndFemale[j].female = tempFemale
                    }
                    // console.log("当前班级信息情况：")
                    // console.log(classInfo[j])

                    // 科目最大和最小赋值。
                    courseMaxAndMin[i].classData[j] = {
                        className: classInfo[j],
                        maxScore:  maxScore,
                        minScore:  minScore
                    }

                    maxScore = 0
                    minScore = 100
                }
            }


            console.log("==========================================")
            console.log("数据部分:")
            console.log(courseInfoList)
            console.log("班级部分：")
            console.log(classInfo)
            console.log("边界值部分:")
            console.log(courseMaxAndMin)
            console.log("课程男女比例：")
            console.log(classMaleAndFemale)
            // console.log("临时男女比例：")
            // console.log(tempMale)
            // console.log(tempFemale)

            // console.log("全专业男女比例：")
            // console.log(allMale)
            // console.log(allFemale)


            // 对图标进行赋值。
            // console.log("科目：")
            // console.log(courseMaxAndMin[0])
            // console.log(courseMaxAndMin[0].classData)
            // console.log(courseMaxAndMin[0].classData[0])
            // console.log(courseMaxAndMin[0].classData[0].maxScore)
            // console.log(courseMaxAndMin[0].classData[0].minScore)


            // 科目，A 班最高分、B班最高分、C班最高分。
            for (let m = 0; m < courseMaxAndMin.length; m++) {
                // option00Data.dataList[m] = [courseMaxAndMin[m].courseName,courseMaxAndMin[m].classData[0].maxScore,courseMaxAndMin[m].classData[1].maxScore]
                option00Data.dataList[m] = [courseMaxAndMin[m].courseName]
                option02Data.dataList[m] = [courseMaxAndMin[m].courseName]
                for (let n = 0; n <courseMaxAndMin[m].classData.length; n++) {
                    option00Data.dataList[m][n+1] = courseMaxAndMin[m].classData[n].maxScore
                    option02Data.dataList[m][n+1] = courseMaxAndMin[m].classData[n].minScore
                }
            }
            // 设置图标条形图个数。
            for (j = 0; j <classInfo.length; j++) {
                option00Data.seriesList[j] = { type: 'bar' }
                option02Data.seriesList[j] = { type: 'bar' }
            }

            // 男女饼图 【全专业】
            for (let i = 0; i < 2; i++) {
                // 男左，女右
                option01Data[i] = {value: i===1?allFemale:allMale, name: i===1?'女':'男'}
            }

            // 各个班级 男女比例情况。
            let initLeft = 25
            let initTop = 10
            let initRight = 30
            // 各个班级的男女人数
            let option03DataInfo = [['男'],['女']]

            // 班级个数。
            for (let m = 0; m < classMaleAndFemale.length; m++) {
                // 标题。
                option03Data.titleList[m] = {
                    subtext: classMaleAndFemale[m].className,
                    // subtext: 'A班',
                    left: initLeft+'%',
                    top: initTop+'%',
                    textAlign: 'center'
                }
                option03Data.classList[m+1] = classMaleAndFemale[m].className
                // 饼图个数
                option03Data.seriesList[m] = {
                    type: 'pie',
                    radius: '20%',
                    center: [initLeft+'%', initRight+'%'],
                    encode: {
                        itemName: 'product',
                        // value: 'B班'
                        value: classMaleAndFemale[m].className
                    }
                }
                // 位置
                initLeft+=50
                // 饼图偶数个
                if (m !== 0 && (m+1)%2 === 0){
                    // initLeft += 45
                    initLeft %= 100
                    initRight += 45
                    initTop += 45
                }

                // 由    班级 男 女
                // 转为： 性别 班级

                // 一个班级的男女人数
                // 男性
                option03DataInfo[0][m+1] = classMaleAndFemale[m].male
                option03DataInfo[1][m+1] = classMaleAndFemale[m].female
            }
            // 数据赋值。
            option03Data.dataList = option03DataInfo


            // option05Data。
            // 班级列表
            option05Data.classList = classInfo
            // 学号。求一个班级最多人数的的学号即可。
            let peopleNum = 0
            // 最多人数的班级。
            let maxPeopleNum = 0
            // 1. 查找人数最多的一个班级
            for (let m = 0; m < classMaleAndFemale.length; m++) {
                // 人数
                peopleNum = classMaleAndFemale[m].male + classMaleAndFemale[m].female
                // 获取一个班级中最多的人数。
                if (peopleNum > maxPeopleNum){
                    maxPeopleNum = peopleNum
                }
            }
            // console.log("当前总人数：")
            // 遍历学号部分。
            for (let m = 0; m < maxPeopleNum; m++) {
                option05Data.stuIdList[m] = m+1+''
            }

            // 总分
            let totalScore = 0
            // 总学分
            let credits = 0
            // 计算得到的 GPA 。
            let GPA = 0
            // 当前班级
            thisClassName = ''

            let index = 0

            // 获取 GPA 部分。
            option05Data.GPAList[index] = {
                name: '',   // 班级
                type: 'line',
                stack: 'Total',
                smooth: true,
                data: []
            }
            // try {
                // 1. 按照学号进行查询。
                for (i = 0, k = 0; i < courseInfoList[0].stuInfo.length; i++,k++) {
                    // console.log("当前学生学号："+courseInfoList[0].stuInfo[i].studentId)
                    // 初始化第一个班级。
                    if (i === 0){
                        thisClassName = courseInfoList[0].stuInfo[i].className
                        // 班级名称
                        option05Data.GPAList[0].name = thisClassName
                    }
                    // 2. 按照科目进行排序。
                    for (j = 0; j < courseInfoList.length; j++) {
                        try {
                            // console.log("当前科目："+ courseInfoList[j].courseName)
                            // console.log("当前分数："+ courseInfoList[j].stuInfo[i].subjectsScore)
                            // 分数*学分  +  .....
                            totalScore += courseInfoList[j].stuInfo[i].subjectsScore * courseInfoList[j].credits
                        }catch (e) {
                            totalScore += 0
                        }
                        try {
                            // 学分 + .......
                            credits += courseInfoList[j].credits
                        } catch (e) {
                            credits += 0
                        }
                    }
                    GPA = totalScore / credits

                    GPA = toGPA(GPA)

                    // console.log("总分："+totalScore)
                    // console.log("总学分："+credits)
                    // console.log("GPA："+GPA)

                    totalScore = 0
                    credits = 0

                    // 算的 GPA 之后，若同一个班级，则依次增加GPA
                    if (courseInfoList[0].stuInfo[i].className != thisClassName){
                        // console.log("不同班级")
                        thisClassName = courseInfoList[0].stuInfo[i].className
                        index++
                        k = 0

                        option05Data.GPAList[index] = {
                            name: courseInfoList[0].stuInfo[i].className,   // 班级
                            type: 'line',
                            stack: 'Total',
                            smooth: true,
                            data: []
                        }
                    }
                    option05Data.GPAList[index].data[k] = GPA

                }
            // }catch (e) {
            //     layer.msg("选择的专业有误！", {icon: 0});
            // }


            // option04Data
            option04Data.classList = option05Data.classList
            option04Data.stuIdList = option05Data.stuIdList

            // option
            // option00Data.classList = option05Data.classList
            // option02Data.classList = option05Data.classList
            // 遍历班级
            for (let m = 0; m < classInfo.length; m++) {
                option00Data.classList[m+1] = classInfo[m]
                option02Data.classList[m+1] = classInfo[m]
            }

            option00Data.dataList.unshift(option00Data.classList)
            option02Data.dataList.unshift(option02Data.classList)
            console.log("数据：")
            console.log(option00Data)
            // option02.dataset.dimensions = option02Data.classList
            // option00.dataset.dimensions = option00Data.classList

            // 默认第一个科目信息。
            // 参数： 数据源、科目名称、输出的内容
            subjectChartData_option04Data(courseInfoList,courseInfoList[0].courseName,option04Data.dataList)

            console.log("视图的数据部分；")
            // console.log(JSON.stringify(option00Data.dataList))
            console.log(option00Data)
            console.log(option01Data)
            console.log(option02Data)
            console.log(option03Data)
            console.log(option04Data)
            console.log(option05Data)


            // 遍历科目选项卡的个数。
            subjectTabNum()
            console.log("==================================")
            console.log()
        }
    </script>
    <!--选择专业-->
    <script>
        let collegeInfo = JSON.parse(window.sessionStorage.getItem("collegeInfo"))    // 在下拉列表中展示 学院信息。

        console.log("所有班级信息情况")
        console.log(collegeInfo)
        // console.log(collegeInfo[0].child[0])
        // collegeInfo[0].child[0].child = []
        // console.log(collegeInfo[0].child[0].child)

        // 只获取学院的 二级学院、专业。【去除年级、班级】
        for (let i = 0; i < collegeInfo.length; i++) {
            if (collegeInfo[i].child != undefined){
                for (let j = 0; j < collegeInfo[i].child.length; j++) {
                    if (collegeInfo[i].child[j] !=undefined){
                        collegeInfo[i].child[j].child = []
                    }
                }
            }
        }

        layui.use('dropdown', function(){
            var dropdown = layui.dropdown

            //选择班级
            dropdown.render({
                elem: '#proName' //可绑定在任意元素中，此处以上述按钮为例
                , data: collegeInfo
                /*,data: [{
                    title: '人工智能学院'
                    ,id: 24
                    /!*子菜单*!/
                    ,child: [{
                        title: '物联网应用技术'
                        ,id: '01'
                        /!*子菜单*!/
                        // ,child: [{
                        //     title: '2019'
                        //     ,id: 19
                        //     /!*子菜单*!/
                        //     // ,child: [{
                        //     //     title: '2019级物联网应用技术A班'
                        //     //     ,id: '192401'
                        //     // },{
                        //     //     title: '2019级物联网应用技术B班'
                        //     //     ,id: '192402'
                        //     // },{
                        //     //     title: '2019级物联网应用技术C班'
                        //     //     ,id: '192403'
                        //     // }]
                        // },{
                        //     title: '2020'
                        //     ,id: 20
                        //     /!*子菜单*!/
                        //     // ,child: [{
                        //     //     title: '2020级物联网应用技术A班'
                        //     //     ,id: '202401'
                        //     // },{
                        //     //     title: '2020级物联网应用技术B班'
                        //     //     ,id: '202402'
                        //     // },{
                        //     //     title: '2020级物联网应用技术C班'
                        //     //     ,id: '202403'
                        //     // }]
                        // },{
                        //     title: '2021'
                        //     ,id: 21
                        //     /!*子菜单*!/
                        //     // ,child: [{
                        //     //     title: '2021级物联网应用技术A班'
                        //     //     ,id: '212401'
                        //     // },{
                        //     //     title: '2021级物联网应用技术B班'
                        //     //     ,id: '212402'
                        //     // },{
                        //     //     title: '2021级物联网应用技术C班'
                        //     //     ,id: '212403'
                        //     // }]
                        // }]
                    },{
                        title: '电子信息技术'
                        ,id: '52'
                    }]
                }]*/
                ,id: 'proName'
                //菜单被点击的事件
                ,click: function(obj){
                    console.log(obj);
                    // 专业号
                    console.log(obj.id);

                    if (obj.id == "" || obj.id == undefined){
                        // 该班级没有数据。
                        layer.msg("选择的专业有误！", {icon: 0});
                        return ;
                    }
                    $.ajaxSettings.async = false;   //取消异步执行
                    // 发送请求到服务器。获取当前对象的 id 并查询该 id 的所有公共课程。
                    $.get(webUrl+studentsDataPrefix+"/classForAll/"+obj.id,function (res){
                        console.log("classForAll 回传的信息")
                        // console.log(res)

                        resObj = JSON.parse(res) // 转object。
                        console.log(resObj)

                        // 如果有数据。
                        if (resObj.data.data != 0){
                            // 初始化页面的数据部分。
                            initPageData(resObj, initYear)
                        }
                        // 数据不显示
                        else {
                            // 该班级没有数据。
                            layer.msg("该专业没有数据：", {icon: 0});
                            return ;
                        }


                    });


                    // 班级名称
                    // console.log($("#className span").text() )
                    $("#proName span").text(obj.title)
                    layer.open({
                        type: 3,
                        time: 2000
                    })
                    $(".layui-body").removeAttr("hidden")

                    console.log("自动点击")
                    // 页面首次加载自动点击。
                    $(".layui-this").trigger("click")
                    // 显示页面
                    // initPage()
                    $.ajaxSettings.async = true;   //恢复异步执行
                    /**通过 ajax 请求获取数据，并写入。*/

                    // layer.msg('回调返回的参数已显示再控制台');

                    console.log("-------------------------")
                    console.log("-------------------------")
                }
            });
        });
    </script>

    <!--选项卡-->
    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
            var element = layui.element;

            //年级选项卡点击 事件触发
            element.on('tab(year)', function(data){
                console.log(data);
                console.log("下标：" + data.index)

                let results = 0

                // 年级重绘。
                if (data.index === 0){
                    thisYear = 2019
                    results = initPageData(resObj,thisYear);
                    if (results === -1){
                        return ;
                    }
                    initPage(2019)
                    // 进行重新赋值
                    // option02.dataset.dimensions = option02Data.classList
                    // option00.dataset.dimensions = option00Data.classList

                    // 重绘 图1和图2。
                    // drawDiagramsList()
                    // console.log("当前年份："+thisYear)
                }else if (data.index === 1){
                    thisYear = 2020
                    results = initPageData(resObj,thisYear);
                    if (results === -1){
                        return ;
                    }
                    initPage(2020)

                    // 进行重新赋值
                    // option02.dataset.dimensions = option02Data.classList
                    // option00.dataset.dimensions = option00Data.classList

                    // console.log("年级：2020")
                    // console.log("option00")
                    // console.log(option00)
                    // console.log(option00Data)

                    // 重绘 图0和图2。
                    // drawDiagrams(option00,'ECharts00',false);
                    // drawDiagrams(option02,'ECharts02',false);

                    // // 当前年级
                    // let thisYear = 0
                    // // 初始年份
                    // let initYear  = 2019
                    // // 当前科目
                    // let thisSubject = ""
                    // // 科目和学号
                    // let courseInfoList = []
                    // // 表格核心数据。
                    // let resObj = {}

                    // console.log("数据：")
                    // console.log(thisYear)
                    // console.log(thisSubject)
                    // console.log(courseInfoList)
                    // console.log(resObj)

                    // drawDiagramsList()
                    // console.log("当前年份："+thisYear)
                }else if (data.index === 2){
                    thisYear = 2021
                    results = initPageData(resObj,thisYear);
                    if (results === -1){
                        return ;
                    }
                    initPage(2021)
                    // drawDiagramsList()
                }
            });

            //科目选项卡点击 事件触发
            element.on('tab(subjects)', function(data){
                console.log("科目选项卡：")
                // console.log(data);
                console.log("下标：" + data.index)

                let subjectLabel = $("subject")
                // console.log("选项卡")
                // console.log(subjectLabel)

                // 科目重绘。
                // if (data.index === 0){
                //     initSubjectTab(subjectLabel[0].innerText)
                // }else if (data.index === 1){
                //     initSubjectTab(subjectLabel[0].innerText)
                // }else if (data.index === 2){
                //     initSubjectTab(subjectLabel[0].innerText)
                // }
                for (let i = 0; i < subjectLabel.length; i++) {
                    if (data.index === i){
                        initSubjectTab(subjectLabel[i].innerText)
                    }
                }
            });
        });
    </script>
</body>
</html>


<!--
    需要获取的数据部分：

    /**
     * 科目最高分。
     *
     * 数据部分：    option00.dataset.source[i]['科目名称','A班最高分','B班最高分','C班最高分']
     * 班级信息：    option00.dataset.dimensions['product', 'A班', 'B班', 'C班','D班'...]
     *
     */

    /**
     * 总男女比例   --- 饼图
     * 数据部分：    option01.series[0].data[i] [value:人数， name:性别]
     */


    /**
     * 科目最低分
     * 数据部分：    option02.dataset.source[i]['科目名称','A班','B班','C班']
     */


    /**
     * 各班男女比例   --- 饼图
     * 标题：      option03.title[i] {}
     * 数据部分：   option03.dataset.source[i] ['性别','A班人数','B班人数','C班人数','D班人数']
     */


    /**
     * 总成绩情况
     * 班级名称：    option04.legend.data []
     * 学号：       option04.xAxis.data []
     * 数据部分：    option04.series[i].data  []
     */


    /**
     * 学生GPA
     * 班级：      option05.legend.data []
     * 学号：      option05.xAxis.data []
     * 数据部分：   option05.series[i].data []
     */



-->